<template>
  <div class="about">
    <h1 @click="handleClick">{{loaderTxt}}</h1>
    <h3>{{msgTitle}}</h3>
    <input type="text" v-model="username">
    <button @click="handleSubmit">submit</button>
  </div>
</template>
<script lang="ts">
import {defineComponent, PropType, reactive, toRefs} from 'vue'
export default defineComponent({
  name: 'userDetail',
  props: {
      title: {
        type: String as PropType<string>,
        default: ''
      }
  },
  setup(props, { emit }) {
    console.log(props)
    const state = reactive({
      loaderTxt: '试试router-view',
      username: '',
      msgTitle: props.title
    })
    const handleClick = () => {
      console.log("123")
    }
    const handleSubmit = () => {
      state.msgTitle = state.username
      emit("submit", state.username)
    }
    return {
      ...toRefs(state),
      handleClick,
      handleSubmit
    }
  }
})
</script>